<template>
  <el-dialog
    title="修改所属人"
    :visible.sync="dialogVisible"
    :before-close="beforeClose"
    width="550px"
    >
      <el-transfer
        v-loading="loading"
        class="change-owner-app"
        filterable
        :titles="['备选', '已选']"
        :filter-method="filterMethod"
        v-model="value"
        :button-texts="['', '']"
        :data="data">
      </el-transfer>
    <span slot="footer" class="dialog-footer">
      <el-button round :disabled="saveLoading" @click="dialogVisible = false">取 消</el-button>
      <el-button :loading="saveLoading" round size="small" type="primary" style="width: 124px;" @click="ok">{{saveLoading?'执行中...':'确 定'}}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data(){
    return{
      loading:false,
      saveLoading:false,
      value:[],
      data:[],
      dialogVisible:false,
      fromData:{},
      filterMethod(query, item) {
        return item.label.indexOf(query) > -1;
      }
    }
  },
  methods:{
    open(data){
      this.loading = true
    
      this.fromData = JSON.parse(JSON.stringify(data))
      this.value = []
      this.$nextTick(()=>{
        this.dialogVisible = true
      })
      this.api.getMember({params: {} },{method: "get", customRequest: true})
      .then(res=>{
        const data = []
        res.data.forEach(it => {
          const {id:key,name:label} = it
          if(this.fromData.ownerId!==key) data.push({key,label})
        });
        this.data = data
        this.loading = false
      })
    },
    ok(){
      if(this.value.length!==1){
        this.$message({
          type: 'warning',
          message:'请选择一个所属人!'
        });
        return 
      }
      this.saveLoading = true
      this.api.changeOwnerApp({appId: this.fromData.id,newOwnerId: this.value[0]})
      .then(res=>{
        this.$message({
          type: 'success',
          message:'修改成功!'
        });
        this.$emit('change')
        this.dialogVisible = false
      })
      .catch(err=>{
        console.log(err)
        this.$message({
          type: 'warning',
          message:'修改失败!'
        });
      })
      .finally(()=>{
        this.$nextTick(()=>{
          this.saveLoading = false
        })
      })
    },
    beforeClose(done){
      if(!this.saveLoading) done()
    },
  }
}
</script>
<style lang="scss" scoped>
  .change-owner-app{
    margin-left: 25px;
    & /deep/ .el-transfer__buttons{
      width: 60px;
      padding: 0;
      position: relative;
      .el-button{
          margin: 10px 0 0 3px !important;
          width: 54px; 
          &:first-child{
            position: absolute;
            top: 4px;
          }
          &:last-child{
            position: absolute;
            top: -40px;
          }

      }
    }
  }
</style>